<template>
	<view>
		<Header title="客资详情"></Header>
		<view class="toubu"> <!--  -->
			<view class="content_content_con shadow" style="margin-bottom: 30rpx;">
				<view class="shangjia" v-for="(item,index) in list" :key="index">
					<view class="heise_ziti">{{item.title}}</view>
					<view class="" v-if="index == 4" @tap="publics.phone(item.val)">
						<view class="tianxie">{{item.val}}
							<image src="/static/image/index/fuzhi.png" @tap.stop.prevent="publics.fuzhi(item.val)"
								class="fuzhi" v-if=" index==4&&item.val !== '暂无' "></image>
						</view>
					</view>
					<view class="" v-else-if="index !== 4">
						<view class="tianxie">{{item.val}}
							<image src="/static/image/index/fuzhi.png" @tap="publics.fuzhi(item.val)" class="fuzhi"
								v-if="index==0 || index==3&&item.val !== '暂无'"></image>
						</view>
					</view>

				</view>
				<view class="shangjia no_dis">
					<view class="heise_ziti">服务城市</view>
					<view class="tianxie">
						<!-- <span v-for="item in xinxival.kz_wantcity" style="padding-right:12rpx">{{item}}</span> -->
						<span style="padding-right:12rpx">{{publics.s_dizhi()}}</span>
					</view>
				</view>
				<view class="beizhu" v-if="xinxival.kz_remark != ''">备注
					<text class="add_input">{{xinxival.kz_remark}}</text>
				</view>
				<view class="liaotian_title" v-if="xinxival.kz_voucher_pic.length!=0">客户线索<span>(最多上传三张图片)</span></view>
				<view class="shangchaun_photo" v-if="xinxival.kz_voucher_pic.length!=0">
					<view class="to_photo" v-for="(item,index) in xinxival.kz_voucher_pic" :key="index">
						<image :src="item" @click="publics.tupian_s(xinxival.kz_voucher_pic,index)"></image>
					</view>
				</view>
			</view>
			<view class="genjin">
				跟进记录
			</view>



			<view>
				<timeAxis :dataArray="log"></timeAxis>
			</view>
			<view class="six_guanli__footer" v-if="tianjia !=  0">
				<view class="anniu" @click="xiugai">添加跟进</view>
			</view>

		</view>

		<kezitk :show="show_s" :remarks="xinxi" :state_s="state_s" :idd="kzid" @tanchuangbi="guanbi"
			@kezitankuang="kezitankuang"></kezitk>
		<requestLoading></requestLoading>
	</view>
</template>
<script>
	import kezitk from "@/components/kezi_tk.vue";
	import timeAxis from '@/components/time_axis/time_axis.vue'

	export default {
		components: {
			kezitk, timeAxis
		},
		data() {
			return {
				tishi: 1, //展示加载动画
				showtankuang: false,
				xiugaiBtn: false,
				show_s: false,
				gaodu: '',
				list: [{
					title: '客资ID',
					val: ""
				}, {
					title: '派单时间',
					val: ""
				}, {
					title: '姓名',
					val: ""
				}, {
					title: '微信号',
					val: ""
				}, {
					title: '联系方式',
					val: ""
				}, {
					title: '预计婚期',
					val: ""
				}, {
					title: '客户类型',
					val: ""
				}],
				log: {
					userimg: "",
					img: "",
					change: '',
				},
				show: false,
				xinxi: {
					state: 1, //
				},
				jindutiao: [{
					name: '提交客资',
					state: 0
				}, {
					name: '审核通过',
					state: 1
				}, {
					name: '已分配商家',
					state: 2
				}, {
					name: '正在跟进',
					state: 3
				}],
				xinxival: {
					kz_remark: '',
					kz_voucher_pic: '',
					kz_wantcity: ''
				},
				kzid: '',
				lookBtn: false,
				xin: {
					phone: '111',
					weixin: '222'
				},
				tianjia: 9,
				state_s: -1,
				isRouterAlive: true,
				lastmsg: '',
				typeid: ''
			}
		},
		onLoad(option) {
			this.kzid = option.id;
			this.typeid = option.typeids;
			this.tianjia = option.tianjia;
			this.kezi_xiangqing();

		},
		onShow() {
			// this.kezi_xiangqing();

		},
		methods: {
			kezi_xiangqing() {
				var that = this;
				this.configure.ajax({
					url: 'kz/findOne',
					tishi: that.tishi,
					data: {
						kzid: that.kzid,
						typeid: 2
					},
					method: 'POST',
					success: function(res) {
						that.xinxival = res.data.resource
						that.log = res.data.log;

						that.state_s = that.log[res.data.log.length - 1].typeid;
						if (res.data.resource.kz_voucher_pic == '' || res.data.resource.kz_voucher_pic ==
							"暂无") {
							that.xinxival.kz_voucher_pic = []
						} else {
							that.xinxival.kz_voucher_pic = res.data.resource.kz_voucher_pic.split(",");
						}
						console.log('0000000000')
						console.log(that.xinxival.kz_voucher_pic)

						that.list[0].val = res.data.resource.id;
						that.list[1].val = res.data.resource.kztoshoptime;
						that.list[2].val = res.data.resource.kz_name;
						that.list[3].val = res.data.resource.kz_wechat;
						that.list[4].val = res.data.resource.kz_tel;
						that.list[5].val = res.data.resource.kz_wedding;
						that.list[6].val = res.data.resource.serve_type;
					}
				})
			},
			kezitankuang(e) {
				var that = this;
				console.log('asssssssssss')
				console.log(e)
				this.configure.ajax({
					url: 'kz/addgenjin',
					tishi: 1,
					data: e,
					method: 'POST',
					success: function(res) {
						// uni.showToast({
						// 	title: res.msg,
						// 	icon: "none",
						// });
						setTimeout(() => {
							that.tishi = 3;
							that.kezi_xiangqing()
						}, 500);
					},
				})
			},
			xiugai() {
				var that = this;
				// if(this.log.length-1){
				var allmsg = that.log
				// console.log(allmsg,'allmsg')
				that.lastmsg = allmsg[allmsg.length - 1];
				// console.log(that.lastmsg,'this.lastmsg')
				// that.show_s =true;
				if (that.lastmsg.typeid == 4 || that.lastmsg.typeid == 5 || that.lastmsg.typeid == 11) {
					that.show_s = false;
					uni.showToast({
						title: '请先将本客资领取后,在进行跟进操作',
						icon: "none",
					});
				} else {
					that.show_s = true;
				}
			},
			guanbi(e) {
				console.log(e, "传过来的e")
				this.show_s = false;

			},
		}
	}

</script>


<style lang="scss" scoped>
	.fuzhi {
		width: 24rpx;
		height: 24rpx;
		margin-left: 18rpx;
	}

	.kezi_jindu_xi {
		width: 2rpx;
		height: 280rpx;
		margin-left: 14rpx;
		background: $zhuce_color;
	}

	.zhuan {
		width: calc(100% - 57px);
		height: 240rpx;
	}

	.jindu {
		height: 300rpx !important;
	}

	.suodanimg {
		width: 106rpx;
		height: 116rpx;
	}

	.liaotian_title {
		margin-top: 40rpx;
		margin-bottom: 30rpx;
		font-size: 30rpx;
		color: $heise_ziti;

		span {
			color: $qianhui_ziti;
			font-size: 20rpx;
		}
	}

	.shangchaun_photo {
		width: calc(100%-120rpx);
		margin: auto;
		display: flex;
		margin-bottom: 30rpx;


	}

	.to_photo {
		background-color: $qianhui_white;
		width: 190rpx;
		height: 210rpx;
		border-radius: 12rpx;
		border: solid 10rpx $white_ziti;
		box-shadow: $shadow;

		image {
			width: 190rpx;
			height: 210rpx;
		}
	}

	.yinhangka_guanli__footer {
		width: 100%;
		height: 140rpx;
		position: fixed;
		bottom: 0rpx;
		background: $white_ziti;

		view {
			margin-top: 30rpx;
		}
	}

	.zhaungtai {
		display: flex;
		justify-content: space-between;
		height: 110rpx;
		line-height: 110rpx;
		color: $heise_ziti;
		font-size: 30rpx;
	}

	.shangchaun_photo view:nth-child(2) {
		margin: 0 10rpx 0 10rpx;
	}

	.no_dis {
		display: block;

		.tianxie {
			padding-left: 10rpx;
			display: flex;
			overflow: auto;
			white-space: nowrap;
		}

	}

	.tianxie::-webkit-scrollbar {
		display: none;
	}

	.btn_shenhe {
		padding: 10rpx 20rpx 10rpx 20rpx;
		background-color: $chengse_color;
		color: $white_ziti;
		text-align: center;
		margin: auto 0;
		line-height: 60rpx;
		border-radius: 6rpx;
	}

	.beizhu {
		line-height: 110rpx;
		font-size: 30rpx;
		display: flex;
		flex-direction: column;
	}

	.tianxie {
		font-size: 28rpx;
		color: $qianhui_ziti;
	}

	.add_input {
		font-size: 28rpx;
		color: $qianhui_ziti;
		// width: calc(100%-60rpx);
		height: 90rpx;
		background-color: $qianhui_white;
		padding-left: 30rpx;
		border-radius: 12rpx;
		line-height: 90rpx;
		overflow: auto;
		white-space: nowrap;
		margin-bottom: 30rpx;
		// width: 400rpx;
	}

	.add_input::-webkit-scrollbar {
		display: none;
	}

	.dianji_photo {
		width: calc(100%-120rpx);
		text-align: center;
		background-color: $qianhui_white;
		width: 190rpx;
		height: 210rpx;
		border-radius: 12rpx;
		border: solid 10rpx $white_ziti;
		box-shadow: $shadow;
		margin-bottom: 40rpx;

		image {
			width: 60rpx;
			height: 60rpx;
			padding-top: 60rpx;
		}

		._photo {
			font-size: 26rpx;
			color: $qianhui_ziti;

		}
	}

	.dianji_photo view:nth-child(2) {
		margin: 0 10rpx 0 10rpx;
	}




	.kezi_jindu {
		display: flex;
		justify-content: flex-start;
		font-size: 24rpx;
		height: 88rpx;

		.kezi_jindu_dian {
			width: 42rpx;
			overflow: hidden;
			margin-right: 20rpx;

			.kezi_jindu_dian_dian {
				width: 18rpx;
				height: 18rpx;
				border-radius: 50%;
				background: $green_color;
				border: 6rpx solid $white_ziti;
				box-shadow: $shadow;
				// margin:12rpx;
			}

			.kezi_jindu_xian {
				width: 2rpx;
				height: 66rpx;
				margin-left: 14rpx;
				background: $zhuce_color;
			}
		}

	}

	.green {
		background-color: #06CE00;
	}

	.chengse {
		background-color: #FEAE3B;
	}

	.cheng {
		background-color: #FEAE3B;
	}

	.hong {
		background-color: #FF2626;
	}

	.btn_kan {
		margin-left: 20rpx;
		color: red;
	}

	.wenzi {
		font-size: 34rpx;
		border-bottom: 2rpx solid var(--qianhui_eee);
	}

	.xinxi {
		padding: 20rpx 40rpx 20rpx 40rpx;
	}

	.nicheng_content {
		width: calc(100% - 120rpx);
		overflow: hidden;
		margin: 0 auto;
		background-color: $white_ziti;
		border-radius: 20rpx;
		padding: 40rpx 30rpx;
	}

	.six_guanli__footer {
		width: 100%;
		height: 140rpx;
		position: fixed;
		bottom: 0px;
		background: $white_ziti;

		view {
			margin-top: 30rpx;
		}
	}

	.genjin {
		color: $heise_ziti;
		font-size: 34rpx;
		margin-top: 40rpx;
		margin-bottom: 40rpx;
		margin-left: 30rpx;
	}

	.zhuangtai {
		width: calc(100% - 114rpx);
		margin-bottom: 72rpx;
		margin-top: 16rpx;
	}

	.zhuang {
		width: calc(100% - 114rpx);
		height: 260rpx;
	}

	.kezi_jindu_dian {
		width: 42rpx;
		overflow: hidden;
		margin-right: 20rpx;
	}

	.kezi_jindu_dian_dian {
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		border: 2rpx solid $zhuce_color;
		box-shadow: $shadow;
		// margin:12rpx;
	}

	.kezi_jindu_xian {
		width: 2rpx;

		height: 560rpx;
		// padding-bottom: 10rpx;
		margin-left: 14rpx;
		background: $zhuce_color;
	}

	.quxiao_yuanyin {
		font-size: 24rpx;
		color: $qianhuione_ziti;
		padding-left: 30rpx;
		padding-top: 20rpx;
		word-break: break-all;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
		width: calc(100% - 54rpx);
		margin: auto;
		margin-right: 30rpx;
	}
	._photo {
		display: flex;
	}
</style>

